<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>饭店POS系统</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/admin.css" />
<script src="js/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="top">
	<div class="container-fluid head">
		<div class="row">
				<nav class="navbar navbar-inverse ">
  <div class="container-fluid">

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      <li class="active"><a href="">菜式管理 <span class="sr-only">(current)</span></a></li>
        <li><a href="category.html">菜式类别管理</a></li>
        <li><a href="">顾客信息管理</a></li>
        <li><a href="">分类管理</a></li>
        <li><a href="bill.html">订单管理</a></li>
        <li><a href="">留言管理</a></li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">确定</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >用户 <span class="caret"></span></a>
          <ul class="dropdown-menu" >
            
            <li><a href="">退出登录</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
		</div>
	</div>
</div>
<div class="container-fluid" id="mainContainer">
	<div class="row">
		
			<div class="pull-left col-md-3 left">
			<ul class="list-group">
        <li class="list-group-item">菜式管理
          <ul class="list-group">
            <li class="list-group-item">
            <button type="button" class="btn btn-primary" 
            	data-toggle="modal" data-target="#editModal" onClick="add()">新增菜式</button>
            </li>
          </ul>
        </li>
      </ul>
			</div>
			<div class="pull-right col-md-9 right">
			<table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>菜式名称</th>
        <th>时下价格</th>
        <th>菜式类别</th>
        <th>详细描述</th>
      </tr>
      </thead>
      <tbody id="tbody">
      </tbody>
    <tfoot>
    <tr>
      <th colspan="6"></th>
    </tr>
    </tfoot>
    </table>
			</div>
		
	</div>
</div>
<!-- 编辑弹出框 -->
            <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">编辑框</h4>
                  </div>
                  <div class="modal-body">
                    <div hidden="hidden" class="form-group">
					<label for="dishId">菜式ID</label>
                        <input name="dishId" type="text" class="form-control" 
                        id="dishId" placeholder="" value="">
                </div>
				<div class="form-group">
					<label for="dishName">菜式名称</label>
                          <input name="dishName" type="text" class="form-control" 
                          id="dishName" placeholder="" value="">
				</div>
				<div class="form-group">
					<label for="currentPrice">时下价格</label>
                          <input name="currentPrice" type="text" 
                          class="form-control" id="currentPrice" placeholder="" value="">
				</div>
				<div class="form-group">
					<label for="dishCategory">菜式类别</label>
                          <select name="dishCategory" class="selectpicker" 
                          id="dishCategory" >
                          <option value="0">&nbsp;&nbsp;</option>
                          </select>
				</div>
				<div class="form-group">
					<label for="description">详细描述</label>
                          <input name="description" type="text" class="form-control" 
                          id="description" placeholder="" value="">
				</div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" 
                    id="submit" onClick="submit()">确认</button>
                  </div>
                </div>
              </div>
            </div>
            <!--编辑弹出框结束-->
<div class="bottom">
	<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <div class="img"></div>
		<div class="foot-text"><span>CopyRight by CHHLZ</span></div>
  </div>
</nav>
</div>
</body>
<script>
var categories;
var rows;
var editOrAdd = true;

var dish = {
		dishId: document.getElementById("dishId"),
		dishName: document.getElementById("dishName"),
		currentPrice: document.getElementById("currentPrice"),
		dishCategory: document.getElementById("dishCategory"),
		description: document.getElementById("description")
};

$(document).ready(function(){
	$.post('dishCategory!grid.action', function(data){
		data = $.parseJSON(data);
		categories = data['rows'];
		//console.log(categories);
		for(var i=0; i<categories.length; i++){
			dish['dishCategory'].innerHTML += "<option value='" + categories[i]['dcId'] + "'"
			+ " id='option" + categories[i]['dcId'] + "'>" 
			+ categories[i]['dcName'] + "</option>";
		}
	});
	loadDishes();
});

var loadDishes = function(){
	var tbody = document.getElementById("tbody");
	$("#tbody td").remove();
	$.post('dish!grid.action', function(data){
		//console.log(data);
		data = $.parseJSON(data);
		//console.log(data);
		rows = data['rows'];
		for(var i=0; i<rows.length; i++){
			//var category = getCategory(rows[i]['dishCategory']);
			//var name = category['dcName'];
			//console.log(rows);
			tbody.innerHTML += "<tr>" 
			+ "<td hidden='hidden'>" + rows[i]['dishId'] + "</td>" 
			+ "<td>" + rows[i]['dishName'] + "</td>" 
			+ "<td>" + rows[i]['currentPrice'] + "</td>" 
			+ "<td>" + rows[i]['dishCategory']['dcName'] + "</td>" 
			+ "<td>" + rows[i]['description'] + "</td>" 
			+ "<td><button type=\"button\" class=\"btn btn-primary\" "
			+ "data-toggle=\"modal\" data-target=\"#editModal\" onClick='edit("+ i +")'>编辑</button>"
			+ "<input type=\"submit\" class=\"btn btn-primary\" "
			+ "value='删除' onClick='del("+ rows[i]['dishId'] +")'/></td>" 
			+ "</tr>";
		}
	});
}

var getCategory = function(id){
	var category;
	for(var i=0; i<categories.length; i++){
		if(id == categories[i]['dcId']){
			category = categories[i];
		}
	}
	return category;
}

var add = function(){
	editOrAdd = false;
	dish['dishId'].value = "";
	dish['dishName'].value = "";
	dish['currentPrice'].value = "";
	dish['dishCategory'].value = "0";
	dish['description'].value = "";
}

var edit = function(i){
	editOrAdd = true;
	row = rows[i];
	//console.log(row);
	dish['dishId'].value = row['dishId'];
	dish['dishName'].value = row['dishName'];
	dish['currentPrice'].value = row['currentPrice'];
	dish['dishCategory'].value = row['dishCategory']['dcId'];
	dish['description'].value = row['description'];
}

var del = function(id){
	$.post('dish!remove.action', {
		dishId: id
	}, function(status){
		if(status){
			loadDishes();
		}
	});
}

var submit = function(){
	var dcId = dish['dishCategory'].value;
	var category = getCategory(dcId);
	
	//console.log("submit: " + categories.toString());
	
	var url;
	if(editOrAdd){
		url = "dish!edit.action";
	} else {
		url = "dish!add.action";
	}
	
	$.post(url, {
		dishId: dish['dishId'].value,
		dishName: dish['dishName'].value,
		currentPrice: dish['currentPrice'].value,
		dcId: category['dcId'],
		dcName: category['dcName'],
		dcDescription: category['description'],
		description: dish['description'].value
	}, function(status){
		if(status){
			loadDishes();
		}
	})
}
</script>
</html>